<template>
	<view>
		<view class="text-xxl text-bold text-center">请输入验证码</view>
		<view class="margin-top-xxl text-lg flex justify-center">
			<view>
				<text class="text-gray">已发送至手机{{encPhone}}</text>
				<text class="margin-left" :class="[sending?'text-gray':'text-blue']" @tap="sendAgain">
					{{tips}}
				</text>
			</view>
		</view>
		<view class="code margin-top-xxl">
			<input :hold-keyboard="true" type="number" maxlength="1" :focus="index===current" v-for="(item,index) of codes" v-model="item.val" :key="index" @input="codeInput(item,index)" />
		</view>
		<view class="margin-top-xxl flex justify-center">
			<view class="login-btn next-btn" :class="[canNext?'common-btn':'un-use-btn']" @tap="next">下一步</view>
		</view>
		<u-code ref="uCode" :seconds="10" :unique-key="uniKey" @end="end" @start="start" endText="重新发送" changeText="X秒后重新发送" :keepRunning="true" @change="codeChange"></u-code>
	</view>
</template>

<script>
	import {
		VerCodeTypeEnum
	} from "@/enums/verCode"
	import {
		encCardNum
	} from "@/common/utils"
	import {
		verificationCode
	} from "@/api/Interface/login"
	export default {
		props: {
			phone: {
				type: String,
				default: ""
			},
			codeType: {
				type: Number,
				default: VerCodeTypeEnum['忘记密码']
			},
		},
		data() {
			return {
				tips: "",
				sending: true,
				codes: [],
				current: 0,
				uniKey: "event",
				// encPhone: ""
			}
		},
		computed: {
			canNext() {
				return this.codes.findIndex(x => !x.val) < 0 && this.codes.length > 0;
			},
			encPhone() {
				return encCardNum(this.phone);
			}
		},
		mounted() {
			// this.init()
			// this.reckon()
			this.uniKey = `code_${this.codeType}_${new Date().getTime()}`
		},
		methods: {
			init() {
				this.reckon()
				this.codes = []
				for (let i = 0; i < 4; i++) {
					this.codes.push({
						val: null
					})
				}
			},
			reckon() {
				this.$refs.uCode.start()
				this.sending = true;
				// console.log("开始jishi", this.uniKey);
			},
			sendAgain() {
				if (!this.$refs.uCode.canGetCode) return;
				this.reckon()
			},
			end() {
				this.sending = false;
			},
			start() {
				this.sending = true;
			},
			codeChange(e) {
				this.tips = e;
			},
			codeInput(e, index) {
				const {
					val
				} = e
				if (val) {
					if (index < this.codes.length - 1) {
						this.current = index + 1;
					} else this.current = index;
				} else {
					this.current = index - 1;
				}
			},
			next() {
				if (!this.canNext) return;
				const code = this.codes.map(m => m.val).join("");
				verificationCode({
					phone: this.phone,
					verification: code
				}).then(res => {
					if (res.code === 200) this.$emit("next", this.canNext)
					else this.$toast(res.msg)
				})

			},
		},
	}
</script>

<style lang="less" scoped>
	@import url("@/pages/login/css/login.css");

	.code {
		padding: 0 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		input {
			flex: 1;
			height: 140rpx;
			background-color: #f3f3f3;
			border-radius: 15rpx;
			text-align: center;
			font-size: 40rpx;
		}

		input:not(:last-child) {
			margin-right: 30rpx;
		}
	}

	.next-btn {
		width: 50%;
	}
</style>
